<template>
  <div class="search-goods">
    <div class="flex">
      <div class="flex-item">
        <el-input size="medium" v-model="form.name" placeholder="商品名称"></el-input>
      </div>
      <div class="flex-item">
        <el-input size="medium" v-model="form.madeBy" placeholder="合作机构名称"></el-input>
      </div>
      <div class="flex-item">
        <el-input size="medium" v-model="form.tags" placeholder="标签"></el-input>
      </div>
      <div class="flex-item">
        <el-select size="medium" v-model="form.saleType" placeholder="售卖类型">
          <el-option label="正品" :value="0"></el-option>
          <el-option label="试用" :value="1"></el-option>
          <el-option label="拓客" :value="2"></el-option>
        </el-select>
      </div>
      <div class="flex-item2" style="text-align: right">
        <el-date-picker
          v-model="date"
          size="medium"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </div>
    </div>
    <div class="flex">
      <div class="flex-item">
        <el-select size="medium" v-model="form.isPost" placeholder="选择是否邮寄">
          <el-option label="是" :value="0"></el-option>
          <el-option label="否" :value="1"></el-option>
        </el-select>
      </div>
      <div class="flex-item">
        <el-select size="medium" v-model="form.canRefund" placeholder="选择是否退款">
          <el-option label="是" :value="0"></el-option>
          <el-option label="否" :value="1"></el-option>
        </el-select>
      </div>
      <div class="flex-item">
        <el-select size="medium" v-model="form.issueImme" placeholder="是否立即发放绩效">
          <el-option label="是" :value="0"></el-option>
          <el-option label="否" :value="1"></el-option>
        </el-select>
      </div>
      <div class="flex-item2">
        <el-button type="warning" size="small" plain icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="success" size="small" plain icon="el-icon-circle-plus" @click="add">新增</el-button>
        <el-button type="info" size="small" plain icon="el-icon-tickets" @click="output">导出表格</el-button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { datePickerOptions } from '@/libs/time'

export default {
  name: 'search-goods',
  data() {
    return {
      date: '',
      form: {
        name: '',
        madeBy: '',
        tags: '',
        saleType: '',
        isPost: '',
        canRefund: '',
        issueImme: ''
      },
      pickerOptions: datePickerOptions
    }
  },
  created() {
  },
  methods: {
    search() {
      this.$emit('search', this.form)
    },
    add() {
      this.$emit('add')
    },
    output() {
      this.$emit('output')
    }
  },
  watch: {
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '../style/mixin.styl'
.el-range-editor
  width 300px
.flex
  flex-row()
  margin 10px 0
  .flex-item
    flex 1
    // width 170px
    margin-right 10px
    .el-select
      width 100%
  .flex-item2
    width 300px
    display flex
    flex-row()
</style>
